<template>
  <view class="sidebar" :class="[`sidebar-${position}`]" :style="sidebarStyle">
    <view 
      v-for="item in items" 
      :key="item.id"
      class="sidebar-item"
      :style="getItemStyle(item)"
      @tap="onItemClick(item)"
    >
      <image 
        class="sidebar-icon" 
        :src="sheep.$url.cdn(item.iconUrl)" 
        mode="aspectFit"
      />
    </view>
  </view>

  <!-- 弹窗组件 -->
  <s-sidebar-modal 
    v-if="showModal"
    :visible="showModal"
    :item="selectedItem"
    @close="onCloseModal"
  />
</template>

<script setup>
import { computed, ref } from 'vue';
import sheep from '@/sheep';
import SSidebarModal from './components/s-sidebar-modal.vue';

const props = defineProps({
  position: {
    type: String,
    default: 'right'
  },
  top: {
    type: Number,
    default: 200
  },
  items: {
    type: Array,
    default: () => []
  },
  style: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(['itemClick']);

const showModal = ref(false);
const selectedItem = ref(null);

// 计算侧边栏样式
const sidebarStyle = computed(() => {
  const baseStyle = {
    top: `${props.top}rpx`,
    zIndex: 1000
  };

  if (props.position === 'right') {
    baseStyle.right = '20rpx';
  } else {
    baseStyle.left = '20rpx';
  }

  return {
    ...baseStyle,
    ...props.style
  };
});

// 获取单个项目的样式
const getItemStyle = (item) => {
  return {
    backgroundColor: item.backgroundColor || '#ffffff',
    marginBottom: '12rpx'
  };
};

// 点击项目
const onItemClick = (item) => {
  if (!item.enabled) return;
  
  selectedItem.value = item;
  showModal.value = true;
  emit('itemClick', item);
};

// 关闭弹窗
const onCloseModal = () => {
  showModal.value = false;
  selectedItem.value = null;
};
</script>

<style lang="scss" scoped>
.sidebar {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;

  &.sidebar-right {
    right: 20rpx;
  }

  &.sidebar-left {
    left: 20rpx;
  }

  .sidebar-item {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;

    &:active {
      transform: scale(0.95);
    }

    .sidebar-icon {
      width: 40rpx;
      height: 40rpx;
    }
  }
}

@media (max-width: 750rpx) {
  .sidebar {
    .sidebar-item {
      width: 70rpx;
      height: 70rpx;

      .sidebar-icon {
        width: 35rpx;
        height: 35rpx;
      }
    }
  }
}
</style>
